<template>
  <div class="device-detail">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>设备详情</span>
          <el-button type="primary" @click="$router.back()">返回</el-button>
        </div>
      </template>
      
      <div class="device-info">
        <el-descriptions title="设备信息" :column="2" border>
          <el-descriptions-item label="设备名称">{{ device.name || '未知设备' }}</el-descriptions-item>
          <el-descriptions-item label="设备IP">{{ device.ip || 'N/A' }}</el-descriptions-item>
          <el-descriptions-item label="设备型号">{{ device.model || 'N/A' }}</el-descriptions-item>
          <el-descriptions-item label="厂商">{{ device.manufacturer || 'N/A' }}</el-descriptions-item>
          <el-descriptions-item label="固件版本">{{ device.firmwareVersion || 'N/A' }}</el-descriptions-item>
          <el-descriptions-item label="序列号">{{ device.serialNumber || 'N/A' }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="device.status === 'online' ? 'success' : 'danger'">
              {{ device.status === 'online' ? '在线' : '离线' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="最后更新">{{ device.lastUpdate || 'N/A' }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'

const route = useRoute()
const device = ref({
  id: route.params.id,
  name: '示例设备',
  ip: '192.168.1.100',
  model: 'IPC-HFW4431R-Z',
  manufacturer: 'Dahua',
  firmwareVersion: '2.800.0000000.25.R',
  serialNumber: 'PAZ1234567890',
  status: 'online',
  lastUpdate: new Date().toLocaleString()
})

onMounted(() => {
  loadDeviceDetail()
})

const loadDeviceDetail = async () => {
  try {
    // TODO: 实现设备详情加载逻辑
    console.log('加载设备详情:', route.params.id)
  } catch (error) {
    ElMessage.error('加载设备详情失败')
  }
}
</script>

<style scoped>
.device-detail {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.device-info {
  margin-top: 20px;
}
</style>